<extend name="Public/base" />
<block name="title1">我的订单</block>
<block name="css">
	<link rel="stylesheet" href="__PUBLIC__/Css/Home/Order/orderindex.css" type="text/css">
<script>
function iFrameHeight() {   
var ifm= document.getElementById("iframepage1");   
var subWeb = document.frames ? document.frames["iframepage1"].document : ifm.contentDocument;   
if(ifm != null && subWeb != null) {
   ifm.height = subWeb.body.scrollHeight;
   ifm.width = subWeb.body.scrollWidth;
}   
}   

function iFrameHeight2() {   
var ifm= document.getElementById("iframepage2");   
var subWeb = document.frames ? document.frames["iframepage2"].document : ifm.contentDocument;   
if(ifm != null && subWeb != null) {
   ifm.height = subWeb.body.scrollHeight;
   ifm.width = subWeb.body.scrollWidth;
}   
}   
</script>

</block>
<block name="main1">
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~固定在头部的导航栏~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<nav class="navbar navbar-default" role="navigation">
	<div class="navbar-header">
		 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button> <a class="navbar-brand">订单展示</a>
	</div>
	<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
		<ul class="nav navbar-nav">
			<li class="active">
				 <a>|</a>
			</li>						
		</ul>
		<form action="<{:U('Home/Order/index')}>" class="navbar-form navbar-left" role="search">
			<div class="form-group">
				<input type="text" class="form-control" name="search" placeholder="订单号查询" />
			</div> <input type="submit" class="btn btn-default" value="查询">
		</form>
	</div>
</nav>
<!-- ```````````````````````````````tab分栏效果```````````````````````````````````````````` -->




<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~展示的表格~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->

<div class='showord'>

	<ul id="myTab" class="nav nav-tabs">
		<li class="active">
			<a href="#tab1" data-toggle="tab">
				全部订单
			</a>
		</li>
		<li><a href="#tab2" class="nopaied" data-toggle="tab">未付款</a></li>
		<li><a href="#tab3" class="nook" data-toggle="tab">待收货</a></li>
	</ul>
<!-- tab开始 -->
<div id="myTabContent" class="tab-content">
<!-- 第一个tab选项卡 -->
	<div class="tab-pane fade in active" id="tab1">	
			<table width=100% align="center" class="table table-hover">
			<tr height=30px >
					<th width=30%>商品信息</th>
					<th width=13%>样式</th>
					<th width=12%>单价</th>
					<th width=15%>购买数量</th>			
					<th width=15%>评论状态</th>
					<th width=15%>操作</th>
				</tr>
			</table>
			<foreach name="list" item='vo'>			
			<table width=100% align='center' class='table table-hover' rules=cols frame=rhs>
			<thead>
				<tr>
					<th width=30% colspan='6'>下单时间:<{$vo.ordtime|date="Y-m-d H:i:s",###}>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;订单号:<{$vo.ordnum}></th>
				</tr>
			</thead>		
			
			<tr height=100px>
				<td width=85%>
					<?php foreach(json_decode($vo['content'],true) as $v){ ?>
					<div class="forord">
					<p class="showimg">
						<img src="__ROOT__/Uploads/prod/<{$v.goods_pic}>" alt="图片" class="pimg">
						<span style="display:inline-block;"><{$v.goods_name}></span>
					</p>
					<p>
						<span class="s1"><{$v.color}></span>
						<span class="s1"><{$v.mobtype}></span>
						<span class="s1"><{$v.memory}></span>
					</p>
					<p>
						&yen;<{$v.goods_price}>
					</p>
					<p>
						<{$v.num}>
					</p>
					<p class="showstatus">
					<if condition="$vo.effect eq 4 ">
						<switch name="v.comment">
							    <case value="0">
								<input type="button" value='去评价' class='comm' data-oid='<{$vo.oid}>_comm' data-id='<{$v.id}>_comm'>
						    </case>
						    <case value="1">已评价</case>
						    <default />
						</switch>
					<else />
						未评论
					</if>					
					</p>
					<br>
					</div>
					<?php } ?>
				</td>
				<td>
					<a href="<{:U('Home/Order/more')}>?oid=<{$vo.oid}>" class="kan">查看详情</a><br>
					<switch name="vo.effect">
					    <case value="0">订单已取消</case>
					    <case value="1">
							<input type="button" value='去付款' class='pay' data-id='<{$vo.oid}>_pay'>
							<input type="button" value='取消订单' class='clos' data-id='<{$vo.oid}>_clos'>
					    </case>
					    <case value="2">
					    	等待店家发货<br>
							<input type="button" value='取消订单' class='clos' data-id='<{$vo.oid}>_clos'>
					    </case>
					    <case value="3">
					    	店家已经发货<br>
							<input type="button" value='确认收货' class='pok' data-id='<{$vo.oid}>_pok'>
					    </case>
					    <case value="4">订单已完成</case>
					    <default />
					</switch>
				</td>			
			</tr>
			
		</table>
		</foreach>
		<div class='pagelist'><{$page}></div>
	</div>
	<!-- 未付款的选项卡 -->
	<div class="tab-pane fade" id="tab2">
	<iframe src="<{:U('Home/Order/tab2')}>"  id="iframepage1" name="iframepage" frameBorder=0 scrolling=no width="100%" onLoad="iFrameHeight();"  >
	</iframe>
	</div>	
	<!-- 未确认收货的选项卡 -->
	<div class="tab-pane fade" id="tab3">
		<iframe src="<{:U('Home/Order/tab3')}>" id="iframepage2" name="iframepage" frameBorder=0 scrolling=no width="100%" onLoad="iFrameHeight2();"  >
		</iframe>	
	</div>

</div>
	  
                
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~js代码部分~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<script>
$(function(){
//去评论~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	$(document).on('click','.comm',function(){
		var id=parseInt($(this).attr('data-id'));
		var oid=parseInt($(this).attr('data-oid'));
		location.href="<{:U('Home/ProductComment/comment')}>?id="+id+"&oid="+oid;

	});
//取消订单
$(document).on('click','.clos',function(){
	var id=parseInt($(this).attr('data-id'));	
	$( "<div>确认取消吗???</div>" ).dialog({
			title:'确认',
			modal: true,
			buttons: {
	        确定: function(){
	          	$.post("<{:U('Home/Order/ocancel')}>",{oid:id},function(data){
					if(data.status){				
						location.reload();				
					}else{
						alert('请重试!');
					}			
				},'json');
	          	$(this).dialog( "close" );
	        },
	        取消: function(){
	        	$(this).dialog( "close" );
	        }

		}});
});	
//确认收货
$(document).on('click','.pok',function(){
	var oid = parseInt($(this).attr('data-id'));	
	$( "<div>确认收货吗???</div>" ).dialog({
			title:'确认',
			modal: true,
			buttons: {
	        确定: function(){
	        	console.log(oid);
	          	$.post('<{:U("sure")}>',{oid:oid},function(data){
					if(data.status){				
						location.reload();				
					}else{
						alert('请重试!');
					}			
				},'json');
	          	$(this).dialog( "close" );
	        },
	        取消: function(){
	        	$(this).dialog( "close" );
	        }

		}});
});
//去付款
$(document).on('click','.pay',function(){
	var oid = parseInt($(this).attr('data-id'));
	location.href="<{:U('Home/Cart/over')}>?oid="+oid;
});


//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
})
</script>
</block>